<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>待挂资源</title>
	<% request.setAttribute("menu", 1); %>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
	<link rel="stylesheet" href="<%=basePath%>plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
	<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />

	<style type="text/css">
		.hidinfodiv,.hidimgdiv {display: none;}
		.hidinfodiv .filediv {margin-top: 10px; margin-left: 10px;}
		.hidinfodiv ul li {float: left;margin-left: 5px;}
	</style>

</head>
<body>
	<div class="admin-tab admin-user admin-transform">
		<div class="tab-condition">
			<form class="layui-form clefix waitforancform" action="/customer/waitforanchoredurl" method="post" id="waitforancform">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="text" name="keyWord" id="keyWord" lay-verify="title" autocomplete="off" placeholder="输入关键词后搜索" class="layui-input" value="${pager.params.keyWord}" >
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-inline"  style="width:10%;">
						<input type="text" name="address" id="address" autocomplete="off" placeholder="输入地区" class="layui-input" value="${pager.params.address}" >
					</div>
				</div>
				<div class="layui-form-item">
					<input name="skipToPage" id="skipToPage"  type="hidden" value="${pager.pageNo}">
					<input type="hidden" id="pageNo" name="pageNo" value="${pager.pageNo}">
					<input type="hidden" id="totalPage" name="totalPage" value="${pager.totalPages}">
					<button class="layui-btn customersearchbtn" lay-submit="" lay-filter="searchform"><i class="layui-icon layui-unselect layui-tab-close">&#xe615;<!-- &#xe642; --></i>搜索资源</button>
					<button class="layui-btn searchbtnclean" type="button" lay-submit="" lay-filter="searchform">清空搜索</button>
				</div>
			</form>
			<div class="TM-tab-info">
				<span style="color: #f990ab">垫款总额： <fmt:formatNumber value="${totlamoney}" pattern="#,#00"/>元</span>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a class="layui-btn layui-btn-primary layui-btn-small  refreshbtn"><i class="layui-icon">&#x1002;</i>刷新</a>
			</div>
		</div>
		<div class="layui-field-box">
			<table class="site-table table-hover TM-table3">
				<thead>
				<tr>
					<th style="width:5%;">姓名</th>
					<th style="width:14%;">收证时间【45天限时出证】</th>
					<th style="width:5%;">出证情况</th>
					<th style="width:5%;">消除垫款</th>
					<!-- <th style="width:8%;">帐号</th>
					<th style="width:8%;">密码</th> -->
					<th style="width:9%;">证书及专业</th>
					<th style="width:10%;">地区</th>
					<th style="width:6%;">已垫款</th>
					<th style="width:5%;">所属人</th>
					<th style="width:32%;">备注</th>
					<th style="width:5%;">操作</th>
				</tr>
				</thead>
				<tbody>
					<c:forEach var="obj" items="${pager.resultList}" varStatus="o1">
						<tr>
							<td>${obj.cname}</td> 
							<td>${obj.arrivetime.substring(0,10)}【<c:if test="${fn:contains(obj.days, '-')}"><span style="color:red">已超${fn:replace(obj.days, '-', '')}天</span></c:if><c:if test="${!fn:contains(obj.days, '-')}" >剩余${obj.days}天</c:if>】</td>
							<td><c:if test="${obj.contractid>0}"><span style="color:green">已出</span></c:if><c:if test="${obj.contractid<1}"><span style="color:red">未出</span></c:if>   </td>
							<td>未消</td>
							<%-- <td>${obj.account}</td>
							<td>${obj.password}</td> --%>
							<td>${obj.technicalpost}</td>
							<td>${obj.address}</td>
							<td>${obj.advancemoney}</td>
							<td>${obj.createusersname}</td>
							<td>${obj.remark}</td>
							<td>
								<a href="#" class="layui-btn layui-btn-normal layui-btn-mini check" data="${obj.id}" namedata="${obj.cname}">扫描件</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="admin-table-page">
				<div   class="page" ><div class="layui-laypage"  ><span class="layui-laypage-total"><button type="button" class="layui-laypage-btn">共${pager.totalSize}条记录</button></span></div></div>
			</div>
			<div class="admin-table-page">
				<div id="page" class="page"></div>
			</div>
		</div>
	</div>
	
	<!-- 文件列表展示 -->
	<div class="hidinfodiv"></div>
	
	<!-- 文件列表模版 -->
	<script id="wjlb" type="text/html">
		<div class="filediv">
			<table class="layui-table" lay-even="" lay-skin="row">
				<colgroup>
					<col width="250">
					<col width="100">
					<col width="150">
					<col width="100">
					<col>
				</colgroup>
				<thead>
    				<tr>
						<th>备注</th>
      					<th>类型</th>
						<th>文件名</th>
      					<th>操作</th>
    				</tr> 
  				</thead>
				<tbody>
					{{#  layui.each(d, function(index, item){ }} 
					<tr>
						<td style="color:blue;">{{item.remark}}</td>
						<td>{{item.type==1?'扫描件（原件在公司）':'扫描件'}}</td>
						<td>{{item.filename}}</td>
						<td>
							<a class="showimg" datafileid="{{item.fileid}}" datafileext="{{item.suffix}}" data="{{item.id}}" dataremark="{{item.remark}}">预览</a>
							<a href="/file/{{item.id}}">下载</a>
						</td>
					</tr>
					{{#  }); }} 
  				</tbody>
			</table>  
		</div>
	</script>
	
	<script>
		
	layui.use(['icheck','element','laypage','form','laydate',"laytpl"],function(){
		var $ = layui.jquery,
        layer = layui.layer,
        laytpl = layui.laytpl,
        laypage = layui.laypage;
        var form = layui.form();
        form.render();
        
        var pageNo = $("#pageNo").val();
    	var totalPage = $("#totalPage").val();
		//分页按钮
    	laypage({
            cont: 'page',
            curr: pageNo//'${pager.pageNo}'
            ,pages: totalPage//'${pager.totalPages}' //总页数
            ,
            groups: 5 //连续显示分页数
            ,
            skip: true,
            jump: function(obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                if(!first) {
                	$("#skipToPage").val(curr);
                	$("#waitforancform").submit();
                }
            }
        });
        
        //点击搜素
		$(".customersearchbtn").on("click",function(){
        	$("#pageNo").val(1);
			$("#skipToPage").val(1);
			$("#waitforancform").submit();
        });
        
        //点击清空
        $(".searchbtnclean").on("click",function(){
        	$("#keyWord").val("");
			$("#address").val("");
			form.render();
        });
        
        //点击查看文件列表
        $(".check").on("click",function(){
        	var id = $(this).attr("data");
        	var name = $(this).attr("namedata");
        	var title = name+"的证书原件列表"
        	//ajax获取原件列表
        	$.ajax({
        		type:"post",
        		data:{id:id},
        		url:"/customer/getcusfilelistbycusid",
        		dataType:"json",
        		async: false,
        		success:function(data){
        			var getTpl = $("#wjlb").html();
        			laytpl(getTpl).render(data, function(html){
						$(".hidinfodiv").html(html);
					});
        			layer.open({
                		type:1,
        	   		  	//btn:['确定','取消'],
        	           	//btnAlign:'c',
        	           	shadeClose:true,
        	           	title:title,
        		  		zIndex: 999,
        		  		content: $(".hidinfodiv"),
        		  		area:['75%','65%'],
                	});
        		}
        	});
        });
        
        
      	//移上去查看需求情况
    	$(document).on("click",".showimg",function(){
    		var itemid = $(this).attr("data");
    		var id = $(this).attr("datafileid");
    		var ext = $(this).attr("datafileext");
    		var fileremark = $(this).attr("dataremark");
    		 if(ext==("jpg")||ext==("png")||ext==("gif")||ext==("jpeg")){
    			 html="/downloadfile?id="+id;
    			 layer.photos({
    				    photos: {
    				    	  "title": "", //相册标题
    				    	  "id": 1, //相册id
    				    	  "start": 0, //初始显示的图片序号，默认0
    				    	  "data": [   //相册包含的图片，数组格式
    				    	    {
    				    	      "alt": fileremark,
    				    	      "pid": id, //图片id
    				    	      "src": html, //原图地址
    				    	      "thumb": "" //缩略图地址
    				    	    }
    				    	  ]
    				    	} //格式见API文档手册页
    				    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
    				  }); 
    		 }else{
    				layer.msg("该文件不支持预览，请下载后查看！");
    		 } 
    	});
        
	});
	
	</script>
	
	
	
</body>
</html>